<script type="text/javascript" src="../../includes/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../../includes/ueditor/ueditor.all.js"></script>
<style type="text/css">
    #saveBtn,#finalBtn{min-width:120px;}
    #two_cell,.lib-edit .preview .cell{border-left:0;}
    .unique_div h4{padding-top:20px;}
</style>
<div class="lib-edit">
    <div class="header" style="border:0;border-bottom:1px solid #dbdbdb;">
        <a href="multi.php"><i class="icons icons-back"></i> 多图文内容编辑</a>
    </div>
    <div class="content">
        <div class="preview" style="margin-right:-5px;">
            <div class="cell" id='one_cell' onclick="menu_title()" style="border-left:0;">
                <div class="cover">
                    <h3 style="background:none;background-color:#111;filter:alpha(opacity=30);opacity:0.3;"><{if $infoAll[0].short_title}><{$infoAll[0].short_title}><{else}>标题<{/if}></h3>
                    <div class="img-default">
                        <{if $infoAll[0].pic}>
                            <img src="../../data/image_c/<{$infoAll[0].pic}>" style="width:246px;height:136px;" />
                        <{else}>
                            <div style="width:246px;height:136px;font-size:22px;padding-top:40px;">封面图片</div>
                        <{/if}>
                    </div>
                </div>
            </div>
            <{foreach from=$infoAll key="sk" item="sv"}>
            <{if $sk != 0}>
            <div class="cell cell-small clearfix unique_div" data-index="<{$sk}>" onmouseover='javascript:$(this).children(".popup").show();' onmouseout='javascript:$(this).children(".popup").hide();'>
                <div class="img-s-default" id="img<{$sv.id}>" style="border:0;">
                    <img src="../../data/image_c/<{$sv.pic}>" style="width:75px;position:relative;bottom:15px;" />
                </div>
                <h4><{$sv.short_title}></h4>
                <span class='popup' style='display:none'>
                    <a href='javascript:void(0);'>
                        <i class='glyphicon glyphicon-pencil' onclick="show_form(this,<{$sv.id}>)" title='编辑'></i>
                    </a>
                    <a href='javascript:void(0);'>
                        <i onclick='mul_del(this,<{$sv.id}>)' class='glyphicon glyphicon-trash' title='删除'></i>
                    </a>
                </span>
            </div>
            <{/if}>
            <{/foreach}>
            <div class="cell" id='two_cell' onclick="addTitle(this)">
                <a href="javascript:void(0);" class="btn-add">+</a>
            </div>
        </div>
        <div class="editor" style="width:590px;">
            <form action="multi.php" method="post" id="multi_form" onsubmit="javascript:return false;">
                <div class="cell" id="one_one">
                    <div class="form-rule" role="form">
                        <div class="form-group">
                            <label>关键词<strong class="c-red">*</strong><span class="c-gray">（注:多个规则对应一条内容用逗号分隔。如：help ,帮助）</span></label>
                            <input name="keyword" type="text" class="form-control" value="<{$infoRow.keyword}>">
                        </div>
                    </div>
                </div>
                <div class="form-rule form-rule-add" role="form">
                    <div class='cell'>
                        <div class="form-group">
                            <label>标题</label>
                            <input type="text" name="title" id="actureTitle" class="form-control" value="<{$infoAll[0].title}>">
                        </div>
                        <div class="form-group">
                            <label>封面
                                <input name="pic_showincontent" type="checkbox" value="1" <{if $infoAll[0].pic_showincontent==1}>checked<{/if}> />
                                <span class="c-gray">
                                    <span class="c-green">正文内显示</span>
                                    （大图片建议尺寸：<i style="color:red;font-style:normal;">540px*300px</i>）
                                </span>
                            </label>
                            <div class="fg-upload" onclick="up_img_fun()">
                                <input id="local-image" type="text" readonly class="form-control" style="padding-left:70px;">
                                <a href="javascript:void(0);" class="btn-upload"><i class="icons icons-upload"></i>上传</a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>内容</label>
                            <textarea name="msg_content" id="goods_intro" style="height:160px"><{$infoAll[0].msg_content}></textarea>
                        </div>

                        <div class="form-group">
                            <label>外部链接 <span class="c-gray">(选填)</span></label>
                            <input type="text" name='url' class="form-control" value="<{$infoAll[0].url}>">
                        </div>
                        <div class="form-group">
                            <label>排序<span class="c-gray">（序号越小越靠前）</span></label>
                            <input type="text" name="order_num" class="form-control" value="<{$infoAll[0].order_num|default:0}>" placeholder="序号越小越靠前" />
                        </div>
                    </div>
                </div>
                <div class="cell cell-dark" id='one_state'>
                    <div class="form-rule" role="form">
                        <div class="form-group">
                            <label>状态<strong class="c-red">*</strong> <span class="c-gray"></span></label>
                            <br/>
                            <label><input type="radio" name="state" value='1' <{if $infoRow.state!=2}>checked<{/if}> value='1' /> 开放</label>
                            &nbsp;&nbsp;
                            <label><input type="radio" name="state" value='2' <{if $infoRow.state==2}>checked<{/if}> value='2' /> 关闭</label>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="a" value="edit"/>
                <input type="hidden" name="id" value="<{$infoRow.id}>"/>
                <input type="hidden" name="child_id" value="<{$infoAll[0].id}>" /><!-- 对应detail表id -->
                <input type="hidden" name="pic" id="info_pic" value="<{$infoAll[0].pic}>"/>
                <input type="hidden" name="info_type_form" value="one" />
            </form>
            <div class="opt">
                <a class="btn btn-large btn-success" id="saveBtn" href="javascript:void(0);" onclick="sava_multi(this);">单条保存</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a class="btn btn-large btn-success" id="finalBtn" href="javascript:void(0);" onclick="finalFun()">全部完成</a>
            </div>
        </div>
    </div>
</div>

<!-- 上传图片开始 -->
<link rel="stylesheet" type="text/css" href="../public/upimg/css/upimg.css" />
<script type="text/javascript" src="../public/upimg/upimg.js"></script>
<script type="text/javascript">
	/**
	 * up_img_fun(up_img_php) 执行上传的函数，微沟通图片上传的改版
	 * @param string up_img_php 后台处理图片上传的文件，默认是'../info/upload.php'
	 *
	 * up_img_notify(img_path) 上传回调函数
	 * @param string img_path 返回的图片地址，图片仍放在/data/image_c/下
	 */
	function up_img_notify(img_path) {
		$('#info_pic').val(img_path);
        if(currentItem==0){
            $('#one_cell .img-default').html('<img src="../../data/image_c/'+img_path+'" style="width:246px;height:136px;"/>');
        }else{
            $('.unique_div').eq(currentItem-1).children('.img-s-default').html('<img src="../../data/image_c/'+img_path+'" style="width:75px;position:relative;bottom:15px;" />');
        }
    }
</script>
<!-- 上传图片结束 -->

<script type="text/javascript">
var uea = UE.getEditor('goods_intro');
var currentItem=0;//当前操作的图文的索引，包括顶部图文和子图文
$(function(){
    //标题预览
    $('#actureTitle').keyup(function(){
        if(currentItem==0){
            $('#one_cell h3').text($(this).val());
        }else{
            $('.unique_div').eq(currentItem-1).children('h4').text($(this).val());
        }
    });
});

//完成提交
function sava_multi(obj){
    if ($('input[name="keyword"]').val()=='' && $('input[name="info_type_form"]').val()=='one') {
        note_info('关键词不能为空',obj,'warn');return;
    }
    if ($('input[name="title"]').val() == '') {
        note_info('标题不能为空',obj,'warn');return;
    }
    if ($('#info_pic').val()=='') {
        note_info('请上传封面图片',obj,'warn');return;
    }
    if($("textarea[name='msg_content']").val()==''){
        note_info('内容不能为空',obj,'warn');return;
    }
    
    //敏感词过滤
    var matchStr,senseRow;
    var senseStr='';
    if('<{$senseRow}>'){
        senseRow=$.parseJSON('<{$senseRow}>');
        //关键词
        $.each(senseRow,function(i,n){
            matchStr=$('input[name="keyword"]').val().match(n);
            if(matchStr) senseStr+='&nbsp;'+matchStr+'&nbsp;';
        });
        if(senseStr){
            note_info('关键词包含敏感词'+senseStr+'请更换',obj,'warn');return;
        }
        //标题
        matchStr='';senseStr='';
        $.each(senseRow,function(i,n){
            matchStr=$('input[name="title"]').val().match(n);
            if(matchStr) senseStr+='&nbsp;'+matchStr+'&nbsp;';
        });
        if(senseStr){
            note_info('标题包含敏感词'+senseStr+'请更换',obj,'warn');return;
        }
        //内容
        matchStr='';senseStr='';
        $.each(senseRow,function(i,n){
            matchStr=$("textarea[name='msg_content']").val().match(n);
            if(matchStr) senseStr+='&nbsp;'+matchStr+'&nbsp;';
        });
        if(senseStr){
            note_info('内容包含敏感词'+senseStr+'请更换',obj,'warn');return;
        }
    }
    
    $.post(
        'multi.php?',
        $('#multi_form').serialize(),
        function(msg){
            msg=$.trim(msg);
            if(msg=='suc'){
                note_info('保存成功',obj);
            }else{
                note_info(msg,obj,'warn');
            }
        }
    );
}

//添加子标题
function addTitle(obj){
    if(!$(obj).prev().children().find('img').attr('src')){
        note_info('请先保存上一条图文',obj,'warn');return;
    }
    var subItemLen=$('.unique_div').length;//子图文条数
    if(subItemLen >= 9){
        note_info('最多可添加10条图文',obj,'warn');return;
    }
    
    //.clearfix的data-index标识这是第几条子图文
    var subItemStr="<div class='cell cell-small clearfix unique_div' data-index='"+(subItemLen+1)+"' onmouseover='javascript:$(this).children(\".popup\").show();' onmouseout='javascript:$(this).children(\".popup\").hide();'>";
    subItemStr+="<div class='img-s-default' style='border:0;'>缩略图</div>";
    subItemStr+="<h4>标题</h4><span class='popup' style='display:none'><a href='javascript:void(0);'>";
    subItemStr+="<i onclick='show_form(this,0)' class='glyphicon glyphicon-pencil' title='编辑'>";
    subItemStr+="</i></a><a href='javascript:void(0);'>";
    subItemStr+="<i onclick='mul_del(this,false)' class='glyphicon glyphicon-trash' title='删除'>";
    subItemStr+="</i></a></span></div>";
    $('#two_cell').before(subItemStr);
}

/**
 * 子图文的表单显示
 * @param subItemIndex 第几个子图文
 * @param id 子图文info_common_detail表的id
 */
function show_form(obj,id){
    var subItemIndex=$(obj).parents('.unique_div').attr('data-index');//第几条子图文
    currentItem=subItemIndex;//当前操作的图文的索引(在所有图文中)
    $('.editor').css('marginTop',((subItemIndex-1)*116+177)+'px');//表单位置下移
    
    $('#one_state').hide();//状态开放关闭的radio隐藏
    $('#one_one').hide();//关键词input隐藏
    
    $('input[name="info_type_form"]').val('no_one');//不是第一个表单
    if(id==0){//添加子图文时
        $('input[name="title"]').val('');
        $('input[name="pic"]').val('');
        uea.setContent('');
        $("textarea[name='msg_content']").val('');
        $('input[name="url"]').val('');
        $('input[name="order_num"]').val(currentItem);
        $('input[name="child_id"]').val('');
    }else{//修改子图文时
        $.get('multi.php?a=getSubItem&id='+id,function(res){
            $('input[name="title"]').val(res.title);
            $('input[name="pic"]').val(res.pic);
            $("textarea[name='msg_content']").val(res.msg_content);
            uea.setContent(res.msg_content);
            $('input[name="url"]').val(res.url);
            $('input[name="order_num"]').val(res.order_num);
            $('input[name="child_id"]').val(res.id);
        },'json');
    }
}

//主图文的点击事件
function menu_title(){
    $('#one_state').show();//状态开放关闭的radio显示
    $('#one_one').show();//关键词input显示
    $('input[name="info_type_form"]').val('one');
    $('.editor').css('marginTop','0');

    $('input[name=title]').val('<{$infoAll[0].title}>');
    $('input[name="pic"]').val('<{$infoAll[0].pic}>');
    $("textarea[name='msg_content']").val('<{$infoAll[0].msg_content}>');
    uea.setContent('<{$infoAll[0].msg_content}>');
    $('input[name="url"]').val('<{$infoAll[0].url}>');
    $('input[name="order_num"]').val('<{$infoAll[0].order_num}>');
    $('input[name="child_id"]').val('<{$infoAll[0].id}>');
}

//删除子图文
function mul_del(obj,id) {
    if(id == false) {
        window.location.reload();return;
    }
    if(confirm("确定要删除这条图文吗？")){
        $.get('multi.php?a=delDetail&id='+id,function(res){
           window.location.reload();return;
        });
    }
}

//全部完成
function finalFun(){
    if(confirm("确定每条图文都单条保存了吗？")){
        window.location.href='multi.php';
    }
}
</script>